<template>
  <div>
    <el-backtop></el-backtop>
    <el-row>
      <span style="color:green;font-size: 43px;float: left;margin-left: 100px">贾豆|豆品</span><br>
    </el-row>
    <el-row>
      <span style="font-size: 40px;float:left;margin-left: 100px">{{proname}}</span>
    </el-row>

    <el-row style="float:right;font-size: 32px;margin-right: 100px;line-height: 1.5;text-align: right">
      <font id="myfont" style="padding-top: 13px">{{price}}</font>&nbsp;&nbsp;&nbsp;
      <!--<el-button type="danger" @click="toPay(price)" style="font-size: 22px;width:200px;height: 50px">立即购买</el-button>-->
      <el-button type="danger" @click="dialogVisible = true"
                 style="font-size: 22px;width:200px;height: 50px;float: right">立即购买
      </el-button>
      <div class="demo-image__lazy">
        <el-image v-for="(url,index) in urls" :key="index" :src="url" lazy></el-image>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="65%"
        :before-close="handleClose">
        <div style="height: 450px">

          <el-row>
            <span style="font-size: 30px;float:left;margin-left: 20px;color: black;font-weight:bold">{{proname}}</span>
          </el-row>
          <el-row>
            <span style="font-size: 30px;float:left;margin-left: 20px;color: red;font-weight:bold">{{price}}</span>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="float: left;margin-left: 30px">
                <div class="demo-image__preview">
                  <el-image
                    style="width: 200px; height: 200px;float: left"
                    :src="url"
                    :preview-src-list="srcList">
                  </el-image>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="text-align: left">
                <span style="font-weight: bold;font-size: 22px">数量:</span><br>
                <div style="line-height: 44px">
                  <span style="font-size: 52px;height: 30px;width: 50px" @click="minus()">-</span>&nbsp;&nbsp;
                  <input
                    style="height: 34px;margin-bottom: 25px" type="text" v-model="num">
                  &nbsp;&nbsp; <span
                  style="font-size: 52px" @click="add()">+</span>
                </div>
              </div>
            </el-col>
          </el-row>
          <hr style="margin-top: 30px">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="float: left;margin-left: 40px">
                <el-badge :value="nownum" class="item">
                  <el-button icon="el-icon-shopping-cart-2" type="danger" style="width: 100px;height:50px"></el-button>
                </el-badge>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <el-button type="primary" @click="addCard()"
                           style="background-color:green;width: 83%;height: 65px;font-size: 26px">加入购物车
                </el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <el-button type="primary" @click="confirmOrder(proname,price,num)"
                           style="background-color: indianred;width: 80%;height: 65px;font-size: 28px">立即购买
                </el-button>
              </div>
            </el-col>
          </el-row>


        </div>
        <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        nownum: 0,
        urls: [
          'http://qapthkpg0.bkt.clouddn.com/a7.jpg',
          'http://qapthkpg0.bkt.clouddn.com/a5.jpg',
          'http://qapthkpg0.bkt.clouddn.com/a6.jpg',
          'http://qapthkpg0.bkt.clouddn.com/a4.jpg',
          'http://qapthkpg0.bkt.clouddn.com/a1.jpg',
          'http://qapthkpg0.bkt.clouddn.com/a2.jpg',
          'http://qapthkpg0.bkt.clouddn.com/a3.jpg',
        ],
        dialogVisible: false,
        proname: '2',
        price: '',
        num: 1,
        url: 'http://qapthkpg0.bkt.clouddn.com/d.jpg',
        srcList: [
          'http://qapthkpg0.bkt.clouddn.com/a7.jpg',
          'http://qapthkpg0.bkt.clouddn.com/a3.jpg',
        ]
      }
    }, methods: {
      toPay: function (price) {
        // alert(price);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      confirmOrder: function (proname, price, num) {
        // alert(proname + "/" + price + "/" + num);
        this.$router.push('/confirmorder/' + proname + '/' + price + '/' + num)
      }, minus: function () {
        this.num = this.num - 1;
        if (this.num <= 0) {
          this.num = 1;
        }
      }, add: function () {
        this.num = this.num + 1;
      }, addCard: function () {
        this.nownum = this.nownum + this.num;
      }

    }, created: function () {
      this.price = '¥' + this.$route.params.price;
      this.proname = this.$route.params.proname
    }
  }
</script>

<style scoped>
  #myfont {
    color: red;
    font-size: 33px;
  }

  .increment {
    text-decoration: none;
    width: 6px;
    text-align: center;
    padding: 8px;
    -moz-padding-top: 10px;
    -moz-padding-bottom: 13px;
    -webkit-padding-top: 10px;
    -webkit-padding-bottom: 13px
  }

  .mins {
    border: 1px solid #ddd;
    border-right: 0;
    float: left
  }

  .plus {
    border: 1px solid #ddd;
    border-left: 0;
    float: left
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
